let input_box = document.querySelector("#input_box");
    let onlineListElem = document.querySelector("#online_list");
    let chatInfoBox = document.querySelector("#chat_info_box");
    let sendTextBox = document.querySelector("#sendTextBox");

    // 已连接
    let connect = false;

    function sendData(){
        if(!connect){
            return;
        }
        let data = {
            type:"chat",
            chatInfo:{
                type:reciprocalAccount.type,
                uuid:reciprocalAccount.uuid,
                data:{
                    text:input_box.value
                }
            }
        }
        ws.send(data);
    };

    var ws = new WebSocket("ws://127.0.0.1:8080");

    let onlineList = {};

    let reciprocalAccount = {
        type:"user",
        uuid:""
    }

    let chatRecord = [];
    let chatElemList = {};

    ws.onopen = function(msg){
        console.log("连接成功",msg);
        connect = true;
    }

    ws.onmessage = function(msg){
        
        messageHandler(msg);
    }

    function messageHandler(msg){
        var msg_data = JSON.parse(msg.data);
        if(msg_data.msg_type === "onlineList"){
            createOnlineList(msg_data.onlineList);
            chatRecord = msg_data.onlineList.map(uuid=>{
                return {
                    uuid,
                    history:[]
                }
            })
        }
        if(msg_data.msg_type === "newOnlineList"){
            appendUser(msg_data.newOnline);
            chatRecord.push({
                uuid:msg_data.newOnline,
                history:{}
            });
        }
        if(msg_data.msg_type === "message"){
            receiveMessages(msg_data.chatInfo);
        }
        if(msg_data.msg_type === "deleteLink"){
            userCloseLink(msg_data.uuid);
        }
    }

    function createOnlineList(onlineList){
        let fragment = document.createDocumentFragment();
        onlineList.forEach(uuid=>{
            let liEle = createOnlineItem(uuid);
            fragment.appendChild(liEle);
        });
        onlineListElem.appendChild(fragment);
    }

    function appendUser(uuid){
        let liEle = createOnlineItem(uuid);
        onlineListElem.appendChild(liEle);
    }

    function removeUser(uuid){
        onlineListElem.removeChild(chatElemList[uuid]);
        delete chatElemList[uuid];
    }
    /**
     * 
     * @param {string} uuid 
     * @returns 
     */
    function createOnlineItem(uuid){
        let liAttr = {
            name:"li",
            value:uuid,
            attr:{
                class:"online_item"
            },
            event:{
                click(){
                    [].slice.apply(onlineListElem.querySelectorAll(".online_item")).forEach(li=>{
                        li.classList.remove("active");
                    });
                    this.classList.add("active");
                    chooseUser(uuid);
                }
            }
        }
        let liEle = createElement(liAttr);
        chatElemList[uuid] = liEle;
        return liEle;
    }

    function chooseUser(uuid){
        reciprocalAccount.type = "user";
        reciprocalAccount.uuid = uuid;
        not_choose = chatInfoBox.querySelector(".not_choose");
        not_choose.style.display = "none";
    }

    // 接收到消息
    function receiveMessages(chatInfo){
        sendTextBox.innerHTML = sendTextBox.innerHTML + `<li>${chatInfo.text}</li>`;
    }

    function createMessageList(messageList){
        let fragment = document.createDocumentFragment();
        messageList.forEach(msg=>{
            let msgItem = createMessageItem(msg.type === "self");
            fragment.appendChild(msgItem);
        });
    }

    function createMessageItem(isSelf,value){
        let liAttr = {
            name:"li",
            value,
            attr:{
                class:"msg_item" + isSelf ? " self_msg" : " adverse_msg"
            },
            event:{
                click(){
                    [].slice.apply(onlineListElem.querySelectorAll(".online_item")).forEach(li=>{
                        li.classList.remove("active");
                    });
                    this.classList.add("active");
                    chooseUser(uuid);
                }
            }
        }
        let liEle = createElement(liAttr);
        return liEle;
    }

    // 删除一个用户
    function userCloseLink(uuid){
        let userIndex = chatRecord.findIndex((item)=>{
            return item.uuid === uuid;
        });
        if(~userIndex){
            chatRecord.splice(userIndex,1);
        }
        removeUser(uuid);
    }